<div class="header">
    <nav class="navbar navbar-dark">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/" style="display: flex;align-items: center;justify-content: center;">
                    <img height="130%" src="/static/images/logo.svg">
                    <span style="font-size: 20px">Ocean</span>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="navbar-nav nav nav-pills" id="main-menu">
                    <li><a class="" href="/">赛事中心</a></li>
                    <li><a href="/notice">公告</a></li>
                    <li><a href="/user_rank">排行榜</a></li>
                </ul>
                <ul class="navbar-nav nav nav-pills navbar-right">
                    {% if user %}
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                {{ user.username }}</a>
                            <ul class="dropdown-menu">
                                <li><a href="/logout">退出登录</a></li>
                            </ul>
                        </li>

                    {% else %}
                        <li><a class="user-btn" href="/login">登录</a></li>
                        <li><a class="user-btn" href="/register">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

